<template>
  <div>
    <div class="img1">
      <img src="../../..//img/7.jpg" alt="" />
    </div>
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <ul>
        <!--for渲染--> <!--点击列表商品，跳转到详情页--> 
        <li v-for="item in list" :key="item.id" class="li" @click="$router.push('/detail/'+item.id)">
          <div><img :src="item.image" alt="" /></div>
          <div>
            <p class="van-multi-ellipsis--l2">{{ item.title }}</p>
            <p class="price">{{ item.price }}</p>
          </div>
        </li>
      </ul>
    </van-list>
  </div>
</template>

<script setup >
import request from "@/utils/request";
import { ref, onMounted } from "vue";
const list = ref([]);
const pagination = ref(1);
//列表
onMounted(() => {
  request
    .get("/list", {
      params: {
        pagination: 1,
        pageNum: 10,
      },
    }).then((res) => {
      if (res.data.code == 200) {
        list.value = res.data.data;
      }
    });
});
//加载
const loading=ref(false)
const finished=ref(false)
const onLoad=()=>{
    //加载开启
     loading.value=true
     request.get('/list',{
        params:{
            pagination:pagination.value,
            pageNum:10


        }
      }).then((res) => {
      if (res.data.code == 200) {
        list.value = [...list.value,...res.data.data]
      }

      //loading关闭
      loading.value=false
      //页码++
      pagination.value++
      if(list.value.length>=res.data.total)
      {
        finished.value=true
      }
    });
}
</script>

<style lang="scss" >
.img1 {
  margin-left: 20%;
}
ul {
  column-count: 2;
  column-gap: 10px;
  background: #efefef;
  li {
    break-inside: avoid;
    img {
      width: 100%;
    }
    .price {
      color: red;
    }
  }
}
.li {
  background: #fff;
}
</style>
